.primaryColor{

  background-color:#e4eff9;

}

.padder-top-bot{

  padding-top:2em;

  padding-bottom:2em;

}

.PageTitle{

 font-family:"NotoSerif";

 font-size:calc(3vw + 3vh);

 text-align:start;

 margin-left:1em;

}

.HomePageTitle{

  background-color: white;

}

.titleWidth{

  width:fit-content;

  margin-right:0;}

/*Button section for future buttons*/
.button{

}
.btnOver{
  transition: box-shadow 1s;
  box-shadow: 0.5em 0.5em 2em black !important;
}
.OnOffer{
    background-color: #8bc0fd;

    padding:0em;

    border-radius: 0;

    display:flex;

    justify-content: center;

    align-items: center;

    z-index: -1;
}

#waveform{
  position:absolute;

  width:calc(100vw);

  translate:0em -4rem;
}

.FooterUnderline{

  width:50%;

}

.order-behind{

  z-index:-1;/*

  background-image:url("../assets/Media/background-image/mainWaveBackground.png") ;

  background-repeat:no-repeat;

  background-position:top;

  background-size:cover;*/

  }

.order-front{

  z-index:1;

}

.translate-down3{

  translate:0em 3em;

}



.flex-3{

    /*position:relative;

    left:calc(4vw + 5vh);

*/

   width:90%;

    display:flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content:center;

}



.self-bot > a{

display:block;

font-family: "NotoSerif";

font-weight: 500;

font-size: calc(1.5vw + 1.5vh);

box-shadow: 0px 0px black ;

transition:box-shadow 1.5s;

color:black;

background-color: whitesmoke;

padding: 0.5em;

width: 6em;

border-radius: 1.5em;

margin: 1em 1em;

}



.cabin-location{

  display:flex;

  justify-content: center;

  align-items: center;

  width:100%;

  margin-top:0.5em;

  margin-bottom:0.5em;

  height:auto;

}

.cabin-location-text{

  max-height: fit-content;

  padding: 3em 1em;

  background-color: #a8b9d8;

}

.cabin-location-text>p{

font-size: clamp(12px, 1.2vw, 2em);

}

.eco-friendly{

  max-height: fit-content;

  padding: 1em 1em;

  margin:1em 0em;

  background-color: #a8b9d8;



}

.eco-friendly > p {

  font-size:clamp(12px, 1.4vw, 2em);

}

.eco-friendly > h2{

width:100%;}



#eco-scenery{

grid-column:1 / span 3;

grid-row:1 / span 3;

 z-index:-1;

}

#TheCabin{

  grid-column:3/span 3;

  grid-row:3/ span 3;

  z-index:1;

}



.flex-column{

  flex-flow:column nowrap;

}

.flex-SpaceB{

  justify-content: space-between;

}

.cabin-location h2{

  font-size: 2em;

  margin-bottom:1.5em;

  padding-top:1em;



  border-bottom:solid 1px black;

}





.figure{

    display:flex;

    flex-wrap:wrap;

    flex-basis:25%;

    flex-direction:row;

    justify-content: space-around;

    align-items: center;

    background-color:#B6CCE8;

    margin-top:2%;

    margin-left:2%;

    margin-right:2%;

    margin-bottom:2%;

    padding:0%;

}

.figure .img-contain{

    width:90%;

    max-height:50%;

    overflow:hidden;

}

.img-contain > img{

  

 width:100%;

 max-height:30em;



}

.figure h2{

    font-family:"NotoSerif";

    width:90%;

    font-size:clamp(15px, 2vw, 40px);

    text-align: left;

    margin-left: 0.2em;

    margin-top:0.1em;

    margin-right:0.2em;

    margin-bottom: 0.1em

}

.figure p{

  align-self:stretch;

  font-size:clamp(15px, 1.1vw, 40px);

  width: 90%;

  padding-bottom:1%;

}

.img-section{



 display:grid;

 grid-template-rows: repeat(5, 1fr);

grid-template-columns: repeat(5, 1fr);

  

 

}



.img-section .photo{

 width:100%;

}

#contactTitle{

  font-size:calc(2vw + 2vh);

}



.ContactForm{

  display:flex;

  flex-direction:row;

  justify-content: space-evenly;

  flex-wrap:wrap;

  translate:2.5em 0em;

  

}

.formHolder{

width:100%;

  

  

}

.ContactForm div{

  display:flex;

  flex-flow:column;

  justify-content:flex-start;
  width:40%;
  row-gap: 1em;

}

#contactFormArea{

  border-radius: 0.5em;

  padding:0.5em;

  min-width: 50%;



}

.ContactForm textarea{

  border-radius:0.5em;

  border:1px solid rgba(162, 162, 162, 0.3);

  background-color:rgba(203, 214, 228, 0.3) ;

}

.ContactForm div input{

border-radius:0.5em;

border:1px solid rgba(162, 162, 162, 0.3);

background-color:rgba(203, 214, 228, 0.3) ;

 



}



.drop-mask{

  /*clip-path:url(#form-shape);*/

  mask-image:url("..\\assets\\Media\\SVG\\form-back.png");

  mask-position: center;

  

  mask-repeat: no-repeat;

  mask-mode:luminance;

  padding:2em;

  



}



.form{



  padding:4em;

  margin:2em auto;

  display:flex;

  flex-flow:column nowrap;

  row-gap:1.8em;

  background-color:white;



  width:80%;

  

  justify-content:space-evenly;

  align-items: center;



  

}

.clip-form{

 



  

}

.input-contain > *{

  padding:0.5em;

}
.input-contain span{
  display:flex;
  justify-content:flex-start;
  column-gap: 2rem;
}
.input-contain span label{
  width:40%
}
.input-contain span input{
  width:50%;
}

#form-name-home{

}


#ContactButton{

  margin-top:2em;

  font-size: calc(1.2vw + 1.2vh);

  width:8em;

  

}





.center-flex{

  justify-content: center;

  align-items: center;

 

}



.banner{

  border-radius: 0%;

  background-image:url("..\\assets\\CabbinPhotos\\scenery\\WinterWater.jpg");

  background-size:cover;

 height:clamp(22em,50vw,980px);

;  background-repeat:no-repeat;

  background-position:0% 20%;

  display:flex;

  flex-direction: column;

  align-items:flex-end;

  justify-content: center;

  



  min-height:22em; 



  

}

#homeBanner{

  display:flex;

  background-color:rgba( 48, 69, 125, 0.5);

  flex-flow:column wrap;

  justify-content: flex-start;

  align-items:flex-start;

  width:30%;

  margin:1em 2em;



}

#homeBanner  h2{

  text-align: left;

  margin: 0.5em;

  padding:0.5em 0.8em;

  font-family: 'NotoSerif';

  font-size: clamp(12px, 2.5vw, 45px);

  color:whitesmoke;

} 



#homeBanner h3{

  text-align: left;

  margin: 0.5em 0.8em;

  padding:0.5em 0.8em;

  font-family: 'NotoSerif';

  font-size:clamp(12px, 1.8vw, 45px);

  color:whitesmoke;

}



.article{

  font-family:"Georama";

}

.article h2{

  margin:1em 0em;

  font-family:"NotoSerif";

  text-align: left;

}

.article p{

  font-family: "Georama";

  font-size:0.8rem;

  line-height:2.1;

}



.art-fig{

 min-width:50%;

}

.art-fig img{



width:100%;



}

.art-fig figcaption{



}

.divider{

    grid-area:6/1/span 1/-1 ;

    height:50%;

    width:100vw;

    translate:0vw 0vw /*calc(-6.5vw - 4.8vh)*/;

    background-color: floralwhite;

   z-index:1000;

}

.section-div{

    position:absolute;

    translate: calc(-6.5vw - 1.8vh);

    height:35vh;

    width:100vw;

    background-color: floralwhite;

    z-index:1;

   

}

.background-beige{

  background-color: #f2e9d7;

}

.background-blue-highlight{

  background-color: #e5eff9;

}

.button{

  font-family: "NotoSerif";

  font-weight:500;

  font-size:calc(1.5vw + 1.5vh);

  background-color:whitesmoke;

  padding:0.5em;

  width:6em;

  border-radius:1.5em;

  

  margin:0em 0em 1em 0em;

  

}

.button:hover{



}

.button:active{



}

.h-min-30{

  min-height:40vh;

  

}

.large-padding{

  padding-top:6em;

  padding-bottom:3em;

}

.flex-clamp{

  width: clamp(400px, 50%, 1000px);

}



.flexer{

  display:flex;

}

.flex-wrap{

  flex-wrap:nowrap;

}

.flex-wrapped{

  flex-wrap:wrap;

}

.fl-grow-1{

  flex-grow:2;

}

.fl-shrink-1{

  flex-shrink:2;

}

.gap{

  gap:0.5em 0.5em;



}

.flex-ratio-1{

  flex:1 1 auto;

}

.flex-ratio-2{

  flex:2 1 auto;

}

.flex-ratio-3{

  flex:1 2 auto;

}

.flex-ratio-4{

  flex:3 2 auto;

}



.flex-col{

  flex-direction: column;

}

.flex-row{

  flex-direction:row;

}

.flex-around{

  justify-content: space-around;

}

.flex-between{

  justify-content: space-between;

}

.flex-even{

  justify-content: space-evenly;

}

.flex-center{

  justify-content: center;

}

.flexer-item{

  align-self:center;

  justify-self: center;

}

.align-self-start{

  align-self:flex-start

}

.align-self-end{

  align-self:flex-end;

}

.align-center{

  align-items:center;

  align-content:center;

}

.fl-wid-1{

  min-width:100%;

}

.fl-wid-2{

  min-width:50%;

}

.fl-wid-3{

  min-width:30%

}

.flex-img{

  height:100%;

  overflow: hidden;

  

}

.set-margin-0{

  margin:0;

}
.set-margin-1{
  margin:0 5%;
}

.basis-10{

  flex-basis:10%;

}

.basis-20{

  flex-basis:20%;

}

.basis-30{

  flex-basis:30%;

}

.basis-40{

  flex-basis:40%;

}

.basis-50{

  flex-basis:50%;

}

.basis-60{

  flex-basis:60%;

}

.basis-70{

  flex-basis:70%;

}

.basis-80{

  flex-basis:80%;

}

.basis-90{

  flex-basis:90%;

}

.basis-100{

  flex-basis:100%;

}

.gap-col{

  column-gap:1rem;

}

.gap-row{

row-gap:1rem

}

.gap-row-10{

  row-gap:10rem;

}

.box-mask{

  --mask:

    radial-gradient(8.94vw at 50% 12vw,#000 99%,#0000 101%) calc(50% - 8vw) 0/16vw 51% repeat-x,

    radial-gradient(8.94vw at 50% -8vw,#0000 99%,#000 101%) 50% 4vw/16vw calc(51% - 4vw) repeat-x,

    radial-gradient(8.94vw at 50% calc(100% - 12vw),#000 99%,#0000 101%) calc(50% - 8vw) 100%/16vw 51% repeat-x,

    radial-gradient(8.94vw at 50% calc(100% + 8vw),#0000 99%,#000 101%) 50% calc(100% - 4vw)/16vw calc(51% - 4vw) repeat-x;

  -webkit-mask: var(--mask);

          mask: var(--mask);

}

.box-mask-half{

  --mask:

    radial-gradient(8.94vw at 50% 12vw,#000 99%,#0000 101%) calc(50% - 8vw) 0/16vw 51% repeat-x,

    radial-gradient(8.94vw at 50% -8vw,#0000 99%,#000 101%) 50% 4vw/16vw calc(51% - 4vw) repeat-x;

  -webkit-mask: var(--mask);

          mask: var(--mask);

}

.bot-wav {

  --mask:

  radial-gradient(6.31rem at 50% calc(100% - 8.55rem),#000 99%,#0000 101%) calc(50% - 6rem) 0/12rem 100%,

  radial-gradient(6.31rem at 50% calc(100% + 5.55rem),#0000 99%,#000 101%) 50% calc(100% - 3rem)/12rem 100% repeat-x;

-webkit-mask: var(--mask);

        mask: var(--mask);

  }

  .top-wav {

    --mask:

    radial-gradient(6.31rem at 50% 8.55rem,#000 99%,#0000 101%) calc(50% - 6rem) 0/12rem 100%,

    radial-gradient(6.31rem at 50% -5.55rem,#0000 99%,#000 101%) 50% 3rem/12rem 100% repeat-x;

  -webkit-mask: var(--mask);

          mask: var(--mask);

  }



  .top-bot-wav {

    --mask:

    radial-gradient(6.31rem at 50% 8.55rem,#000 99%,#0000 101%) calc(50% - 6rem) 0/12rem 51% repeat-x,

    radial-gradient(6.31rem at 50% -5.55rem,#0000 99%,#000 101%) 50% 3rem/12rem calc(51% - 3rem) repeat-x,

    radial-gradient(6.31rem at 50% calc(100% - 8.55rem),#000 99%,#0000 101%) 50% 100%/12rem 51% repeat-x,

    radial-gradient(6.31rem at 50% calc(100% + 5.55rem),#0000 99%,#000 101%) calc(50% - 6rem) calc(100% - 3rem)/12rem calc(51% - 3rem) repeat-x;

  -webkit-mask: var(--mask);

          mask: var(--mask);

  }